<template>
  <div>
    <el-main>
      <!--    条件搜索      -->
      <el-form :inline="true" :model="querySetmealVo" class="demo-form-inline" style="float: left;display: block">
        <el-form-item label="套餐名">
          <el-input v-model="querySetmealVo.name" placeholder="套餐名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <!--     按钮     -->
      <div style="float: right;display: block;width: 100%;text-align: left">

        <el-button type="primary" @click="addSetmeal('add')" plain style="margin-right: 10px">新增
          <li class="el-icon-plus"></li>
        </el-button>
        <el-button type="danger" @click="deleteBatch" plain style="margin-right: 20px">批量删除
          <li class="el-icon-delete"></li>
        </el-button>
      </div>

      <!--    内容     -->
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="name" label="套餐名" width="200" text-align="center">
        </el-table-column>
        <el-table-column prop="categoryName" label="套餐分类" width="200" text-align="center">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="200" text-align="center">
        </el-table-column>
        <el-table-column prop="state" label="启售状态">
          <template slot-scope="scope" style="text-align: left">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
              @change="switchReceiveStatus($event,scope.row)"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" text-align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页栏-->
      <div style="margin-top: 30px;text-align: center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="this.querySetmealVo.currentPage" :page-sizes="[5, 10, 15, 20]"
          :page-size="this.querySetmealVo.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="this.total">
        </el-pagination>
      </div>

      <!--      修改新增弹窗-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="setmeal">price
          <el-form-item label="套餐名称" :label-width="formLabelWidth">
            <el-input v-model="setmeal.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="套餐价格" :label-width="formLabelWidth">
            <el-input v-model="setmeal.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="套餐分类" :label-width="formLabelWidth" style="text-align: left">
            <el-select v-model="setmeal.categoryId" placeholder="请选择类别">
              <el-option v-for="category in categoryList" :key="category.id" :label="category.name"
                :value="category.id">
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 添加菜品 -->

          <el-form-item label="套餐菜品" :label-width="formLabelWidth">
            <template>
              <el-button type="primary" @click="showInput">+ 新增菜品</el-button>
              <el-table :data="setmeal.setmealDishes" style="width: 100%">
                <el-table-column prop="name" label="菜品名称" width="180">
                </el-table-column>
                <el-table-column prop="price" label="原价" width="180">
                </el-table-column>
                <el-table-column prop="copies" label="份数">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-form-item>
          <el-form-item label="套餐描述" :label-width="formLabelWidth">
            <el-input v-model="setmeal.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>


        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitSetmeal">提 交</el-button>
        </div>
      </el-dialog>

      <!-- 添加菜品 -->
      <el-dialog title="新增菜品" :visible.sync="dishDialogVisible" width="50%" :before-close="addFishHandleClose">

        <el-checkbox-group v-model="dishTableCheckList" @change="dishAddChange">
          <el-checkbox v-for="dish in dishTable" :key="dish.id" :label="dish.id">{{dish.name}}</el-checkbox>
        </el-checkbox-group>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dishDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFishHandle">确 定</el-button>
        </span>
      </el-dialog>

    </el-main>
  </div>
</template>

<script>

export default {
  name: "SetmealView",
  created() {
    this.loadData();

  },
  data() {
    return {
      setmeal: {},
      dishDialogVisible: false,
      dishTableCheckList: [], //菜品
      inputVisible: false,
      inputValue: '',
      categoryList: [],

      dishTable: [],
      tableData: [],
      currentPage1: 5,
      querySetmealVo: {
        currentPage: 1,
        pageSize: 10,
        name: '',
        type: "",
        sort: ''
      },
      total: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',

      ids: [],
      multipleSelection: [],
      op: '',
      title: '新增分类',
      disable: false,
      headerObj: {
        Authorization: window.localStorage.getItem("Authorization")
      }
    }
  },
  methods: {
    addFishHandle() {

      let setmealDishes = []
      this.dishDialogVisible = false;
      this.dishTableCheckList.forEach(v => {
        // console.log(this.dishTable.find(item => item.id == v))
        //构造在提交表单数据中
        let obj=this.dishTable.find(item => item.id == v)
        obj.dishId=obj.id
        obj.id=null
        setmealDishes.push(obj)
      })
      
      this.setmeal.setmealDishes=setmealDishes
      console.log("新增后；",  this.setmeal)


    },
    dishAddChange() {
      console.log(this.dishTableCheckList)
    },
    addFishHandleClose() {

    },
    showInput() {
      if (this.setmeal.categoryId == null) {
        this.$message({
          message: '请先选择分类',
          type: 'warning'
        });
      } else {
        // 点击新增的时候,根据分类 category_id 查询相关的dish
        this.axios.get("/dish/findDishByCategoryId/" + this.setmeal.categoryId).then(res => {
          if (res.status == 200) {
            this.dishTable = res.data.data.data
            this.dishDialogVisible = true;
          }
          console.log("查询菜品", this.dishTable)

        })
      }

    },
    handleClick(val) {

    },

    addSetmeal(op) {
      //查询fenlei 
      this.axios.get("/category/findAll").then(res => {
        if (res.status == 200) {
          this.categoryList = res.data.data.data
          console.log("查询菜品分类", this.categoryList)
        }

      })

      console.log("查询分类")
      this.op = op
      this.title = '新增分类'
      this.dialogFormVisible = true
      this.disable = false
    },

    //获取套餐分类
    getDishType() {

    },

    // 通过套餐ID获取菜品列表分类
    getDishList(id) {


    },

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    resetData() {
      this.setmeal = {
        id: "",
        name: '',
        sort: '',
        type: '',
      }
      this.dialogFormVisible = false
    },

    deleteBatch() {

      if (this.ids.length) {
        this.removeMethod()
        // this.loadData()
      }
    },

    handleSelectionChange(val) {
      this.ids = []
      let _this = this
      val.forEach(function (setmeal) {
        _this.ids.push(setmeal.id)
      })
      console.log(this.ids)
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      console.log("toggle:", rows)
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.setmeal = {
        id: row.id,
        name: row.name,
        setmealId: row.setmealId,
        price: row.price,
        status: row.status,
      }
      this.dialogFormVisible = true
      this.title = "修改信息"
      this.op = 'edit'
      this.disable = true
      // 编程式路由来进行组件跳转
      //this.$router.push({path: '/saveOrUpdate/' + row, replace: true})
    },
    handleDelete(index, row) {
      this.ids = []
      this.ids.push(row.id)
      this.removeMethod()
    },

    removeMethod() {
      this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除请求发送
        this.$axios.get(
          '/setmeal/remove?ids=' + this.ids
        ).then((response) => {
          if (response.data.result) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.loadData();
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        }).catch((reason) => {
          this.ids = []
          console.log(reason)
        })
        this.ids = []
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      }).finally(() => {
        this.ids = []
      });
    },

    handleSizeChange(val) {
      this.querySetmealVo.pageSize = val
      this.loadData()
    }
    ,
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.querySetmealVo.currentPage = val
      this.loadData()
    },
    loadData() {
      let _this = this
      this.$axios.post("/setmeal/queryAll", this.querySetmealVo).then(
        function (response) {
          if (response.data.result) {
            console.log(_this.tableData = response.data.data.pageInfo.list)
            _this.tableData = response.data.data.pageInfo.list
            _this.total = response.data.data.pageInfo.total
          } else {
            _this.$message.error(response.data.message)
          }
        }
      )
    }
    ,
    submitSetmeal() {


      let path = ''
      if (this.op == 'add') {
        path = "/setmeal/addSetmeal"
      } else {
        path = "/setmeal/editSetmeal"
      }
      let _this = this
      this.axios.post(path, this.setmeal).then(response => {
        console.log(response)
        if (response.data.result) {
          _this.$message.success(response.data.message);
          _this.loadData()
        } else {
          _this.$message.error(response.data.message);
        }
      })
      this.resetData()
    },
    onSubmit() {
      console.log(1111)
      this.loadData()
    },

    isOpen(row) {
      console.log(row)
      return true
    },
  }
}

</script>

<style scoped>

</style>